<template>
    <div style="display: flex">
        <div @click="switchCom(item,index)" :class="[active == index ? 'active' : '']" class="tabs" v-for="(item, index) in data" :key="item">
            <div>{{item.name}}</div>
        </div>
        <component :is="comId"></component>
    </div>

</template>

<script setup lang="ts">
    import {ref, reactive, markRaw, shallowRef} from "vue"
    import AVue from '../components/A.vue'
    import BVue from '../components/B.vue'
    import CVue from '../components/C.vue'
    const comId = shallowRef(AVue)
    const active = ref(0)
    const data = reactive([
        {
            name:'A组件',
            com:markRaw(AVue)
        },
        {
            name:'B组件',
            com: markRaw(BVue)
        },
        {
            name: 'C组件',
            com: markRaw(CVue)
        }
    ])
    const switchCom = (item,index)=>{
        comId.value = item.com
        active.value = index
    }


</script>

<style scoped>
    .tabs {
        border: 1px solid #cccccc;
        padding: 5px 10px;
        margin: 5px;
        cursor: pointer;
    }
    .active {
        background:skyblue;
    }

</style>
